<template>
	<view class="content">
		<view class="logo"><image src="../../static/image/test/hdwl.png" mode=""></image></view>
		<!-- <view class="company_name">海科</view> -->
		<view class="form">
			<view class="uni-form-item uni-column"><input type="tel" class="uni-input" v-model="input_login_username" placeholder="请输入手机号" /></view>
			<view class="uni-form-item uni-column"><input type="password" class="uni-input" v-model="input_login_password" placeholder="请输入密码" /></view>
		</view>
		<button type="primary" @click="login()">登陆</button>
		<view class="copyright">
			<view class="text">本小程序仅供海科运输企业内部使用</view>
			Copyright © Hai Ke rights reserved
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			input_login_username: '',
			input_login_password: ''
		};
	},
	methods: {
		onLoad: function() {},
		onShow: function() {
			this.$_if.Initialize(this);
		},
		login: function() {
			uni.showToast({
				title: '登陆中',
				icon: 'loading'
			});
			let self = this;
			let username = this.input_login_username;
			let password = this.input_login_password;
			this.$api
				.login({
					username: username,
					password: password
				})
				.then(res => {
					console.log('login', res);
					let code = res.data.code;
					if (code != 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						return false;
					}
					uni.setStorageSync('user_token', res.data.token);
					self.$api.user({}).then(res => {
						console.log('user', res);
						let code = res.data.code;
						uni.setStorageSync('user', res.data.data);
						uni.setStorageSync('query_user_name', res.data.data.userName);
						uni.setStorageSync('query_nick_name', res.data.data.nickName);
						uni.setStorageSync('query_dept_id', res.data.data.deptId);
						uni.switchTab({
							url: '../home/index'
						});
					});
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.company_name {
	font-size: 50upx;
	text-align: center;
	padding: 30upx;
}

$color-primary: #b49950;

page {
	background-color: #fff;
	height: 100%;
}

.content {
	padding: 100upx;
	background-color: #fff;
	height: 100%;
}

.logo {
	text-align: center;
	margin-top: 40px;

	image {
		height: 100upx;
		width: 500upx;
		// margin: 0 20upx 60upx;
		margin-bottom: 30rpx;
		margin-left: 100rpx;
		margin-top: 60rpx;
	}
}

.uni-form-item {
	margin-bottom: 40upx;
	padding: 0;
	border-bottom: 1px solid #e3e3e3;

	.uni-input,
	input {
		font-size: 30upx;
		padding: 7px 10px;
		height: 75upx;
		line-height: 75upx;
	}
}

button[type='primary'] {
	background-image: linear-gradient(to right, #0099ff, #33ccff);
	font-size: 34upx;
	margin-top: 80upx;
	border-radius: 50px;
	border: solid 1px rgba(0, 0, 0, 0.05);
}

.links {
	text-align: center;
	margin-top: 40upx;
	font-size: 26upx;
	color: #999;

	view {
		display: inline-block;
		vertical-align: top;
		margin: 0 10upx;
	}

	.link-highlight {
		color: $color-primary;
	}
}

.form {
	margin-top: 80upx;
}

.copyright {
	margin-top: 20px;
	text-align: center;
	font-size: rgba(0, 0, 0, 0.6);
	font-size: 12px;

	.text {
		font-size: 14px;
	}
}
</style>
